<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{ url_for("static", filename="js/user/common.js") }}"></script>
    <link rel="stylesheet" href="{{ url_for("static", filename="css/user/common.css") }}">
    {% block head %}{% endblock %}
</head>

<body>
<div class="topbar">
    <div class="logo" onclick="window.location.href='/user/index'"><img src="{{ url_for("static", filename="res/img/logo.png") }}" alt="logo" class="logo" style="width: 350px">
    </div>
    <div class="greeting">
        <text id="welcome">早上好</text>
        ，<a href="/user/center">{{ user.username }}</a>！
    </div>
    <div class="userimage" onclick="window.location.href='/user/center'">
        <img src="{{ user.avatar_url }}" alt="face" style="border-radius: 50%;">
    </div>
    <div class="quit" onclick="window.location.href='/exit'">
        <button>退出</button>
    </div>
</div>

<!-- 侧边栏 -->
<div class="sidebar left">
    <div onclick="window.location.href='/user/index'" class="item" href="/">用户主页</div>
    <div onclick="window.location.href='/user/query'" class="item">书籍查询</div>
    <div onclick="window.location.href='/user/borrow'" class="item">借阅中心</div>
    <div onclick="window.location.href='/user/collect'" class="item">收藏中心</div>
    <div onclick="window.location.href='/user/feedback'" class="item">反馈</div>
</div>

<div class="container">
    {% block body %}{% endblock %}
</div>

<div class="sidebar right">
    <div class="hot-books">
        <h4 class="title">热门书单</h4>
        <div class="list">

            {% for book in data.hot_books %}

                <div class="item" onclick="window.location.href='{{ url_for('blueprint.user_book', id=book.book_id) }}'">`

                    <div class="number">{{ loop.index }}</div>
                    <img src="{{ book.image_url }}" alt="book">
                    <div>
                        <div class="book-name">{{ book.book_name }}</div>
                        <div class="borrow-info">借阅{{ book.borrow_count }}次</div>
                    </div>
                </div>
            {% endfor %}

        </div>
    </div>
    <div class="exit">
        <div class="item" onclick="window.location.href='/exit'">退出登录</div>
    </div>
</div>
</body>


{% block script %}

{% endblock %}

</html>